<template>
  <div class="bottom-navigation-container">
    <div class="bottom-navigation">
      <!-- <img src="@/assets/CampusBus/bottom_nav.svg" alt="底部导航" class="bottom-nav-bg" /> -->
      <div class="nav-items">
          <div class="nav-item" @click="navigateTo('/CampusBus')">
            <img :src="isActive('/CampusBus') ? yuyueSelected : yuyueUnselected" alt="预约" class="nav-icon" />
            <div class="nav-text">预约</div>
          </div>
          <div class="nav-item" @click="navigateTo('/CampusBus/Myreservation')">
              <img :src="isActive('/CampusBus/Myreservation') ? myReservationSelected : myReservationUnselected" alt="我的预约" class="nav-icon" />
            <div class="nav-text">我的预约</div>
          </div>
          <div class="nav-item" @click="navigateTo('/CampusBus/Myinfo')">
              <img :src="isActive('/CampusBus/Myinfo') ? myInfoSelected : myInfoUnselected" alt="我的信息" class="nav-icon" />
            <div class="nav-text">我的信息</div>
          </div>
        </div>
    </div>
    <div class="bottom-indicator"></div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { computed } from 'vue';

// 导入预约图片
import yuyueSelected from '@/assets/CampusBus/nav/预约/预约选中.png';
import yuyueUnselected from '@/assets/CampusBus/nav/预约/预约未选中.png';

// 导入我的预约图片
import myReservationSelected from '@/assets/CampusBus/nav/我的预约/我的预约选中.png';
import myReservationUnselected from '@/assets/CampusBus/nav/我的预约/我的预约未选中.png';

// 导入我的信息图片
import myInfoSelected from '@/assets/CampusBus/nav/我的信息/我的个人信息选中.png';
import myInfoUnselected from '@/assets/CampusBus/nav/我的信息/我的信息未选中.png';

const router = useRouter();
const route = useRoute();

const navigateTo = (path) => {
  router.push(path);
};

const isActive = (path) => {
  return computed(() => route.path === path).value;
};
</script>

<style scoped>
.bottom-navigation-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff; /* 与Figma设计中的Rectangle 15背景色一致 */
  box-shadow: inset 0px 1px 4px 0px rgba(12, 12, 13, 0.05); /* 底部导航的阴影 */
  z-index: 1000; /* 确保导航栏在最上层 */
}

.bottom-navigation {
  position: relative;
  width: 100%;
  max-width: 375px; /* 根据Figma设计宽度 */
  height: 90px; /* 根据Figma设计高度 */
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.bottom-nav-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片覆盖整个区域 */
  z-index: -1; /* 将背景图片置于底层 */
}

.nav-items {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  align-items: center;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1; /* 使每个导航项平均分配空间 */
  height: 100%;
}

.nav-text {
  font-family: Inter;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.21;
  color: rgba(0, 0, 0, 0.63); /* 文本颜色 */
  text-align: center;
  margin-top: 5px
}

.bottom-indicator {
  width: 142px; /* 根据Figma设计宽度 */
  height: 5px; /* 根据Figma设计高度 */
  background-color: rgba(103, 103, 105, 0.84); /* 颜色 */
  border-radius: 10px; /* 圆角 */
  margin-bottom: 4px; /* 根据Figma设计调整位置 */
}

/* 响应式设计 */
@media (max-width: 375px) {
  .bottom-navigation-container {
    width: 100%;
  }
  .bottom-navigation {
    width: 100%;
  }
}

/* 底部导航栏 */
/* 预约 */
/* 移除绝对定位以修复图标堆叠问题，让flex布局管理垂直排列 */
.nav-icon{
width: 25px;
height: 25px;
left: 7px;
}

</style>